@import "../../style/public";
.employeeManage {
    .role-green{
        background-color:#1EC36B;
    }
    .role-red{
        background-color:#EE3A31;
    }
    .role-blue{
        background-color:#459DFF;
    }
    .role-orange{
        background-color:#FD8217;
    }
    .role-purple{
        background-color:#7F6BE9;
    }
    .role-deepblue{
        background-color:#3352E0;
    }
    .page-infinite-loading {
        text-align: center;
        @include remCalc(margin-top, 20);
        @include remCalc(height, 80);
        @include remCalc(line-height, 80);
        @include remCalc(font-size, 14);
    }
    .filter-icon {
        @include remCalc(font-size, 38);
        @include remCalc(padding-left, 20);
        color: #333333;
    }
    .blue {
        color: #459dff;
    }
    .search-wrap {
        @include remCalc(margin-top, 30);
    }
    .section {
        overflow: scroll;
        position: relative;
    }
    .no-more {
        text-align: center;
        color: #999;
        @include remCalc(font-size, 24);
        @include remCalc(padding-top, 30);
    }
    .list{
        background: #fff;
        @include remCalc(margin-bottom, 30);
        @include remCalc(padding-left, 30);
        li{
            @extend %flex;
            border-bottom: 1px solid $color-border;
            @include remCalc(padding-top, 30);
            @include remCalc(padding-bottom, 30);
            .icon{
                text-align: center;
                @include remCalc(width, 80);
                @include remCalc(height, 80);
                @include remCalc(line-height, 80);
                @include remCalc(font-size, 22);
                border-radius:50%;
                color:#ffffff;
            }
            .info{
                @include remCalc(padding-left, 20);
                @extend %flex-item;
                .name{
                    @include remCalc(font-size, 30);
                    @include remCalc(line-height, 30);
                    @include remCalc(margin-bottom, 28);
                    color:#333333;
                }
                .store{
                    @include remCalc(font-size, 26);
                    @include remCalc(line-height, 26);
                    color:#7e7e7e;
                }
            }
            .leave{
                .name{
                    color:#cccccc;
                }
                .store{
                    color:#cccccc;
                }

            }
        }
        li:last-child{
            border:0;
        }
    }
}

.no-more {
    color: #ddd;
    @include remCalc(font-size, 26);
    text-align: center;
    @include remCalc(line-height, 40);
    @include remCalc(padding-bottom, 20);
    position: relative;
    span {
        position: relative;
    }
    span:before {
        content: '';
        position: absolute;
        height: 1px;
        background: #ddd;
        @include remCalc(width, 20);
        @include remCalc(top, 10);
        @include remCalc(left, -30);
    }
    span:after {
        content: '';
        position: absolute;
        height: 1px;
        background: #ddd;
        @include remCalc(width, 20);
        @include remCalc(top, 14);
        @include remCalc(right, -30);
    }
}

.add-employee {
    .page-body {
        .sub-text{
            @include remCalc(font-size, 24); 
            @include remCalc(padding-top, 10);
            color: #999;
            display: block;
        }
        .mine-options {
            @include remCalc(margin-top, 30);
            background: #fff;
            @include thin-border(true,false);
            .option-item {
                display: flex;
                @extend %box-sizing;
                @include remCalc(padding, 26, 0, 20, 0);
                @include remCalc(margin-left, 30);
                @include thin-border(false,false,top);
                &:first-child{
                    &::after{
                        display: none;
                    }
                }
                .left {
                    @include remCalc(font-size, 30); 
                    color: #333333;
                    position: relative;
                }
                .new:after {
                    content: '';
                    position: absolute;
                    background: url(../../assets/images/new.png) 0 0 no-repeat;
                    background-size: contain;
                    @include remCalc(width, 100);
                    @include remCalc(height, 34);
                    @include remCalc( margin-top, 4);
                    @include remCalc(margin-left, 10);
                    @include remCalc(top, 0);
                }
                .right {
                    text-align: right;
                    display: flex;
                    flex:1;
                    align-items: center;
                    justify-content: flex-end;
                    @include remCalc(font-size, 28);
                    @include remCalc(padding-right, 30);
                    .value {
                        //@include remCalc(line-height, 40);
                        //line-height:1.2;
                        color: #7e7e7e;
                    }
                    >input.value {
                        text-align: right;
                        @include remCalc(width, 380);
                    }
                    .get-code-input.value {
                        @include remCalc(max-width, 200);
                    }
                    .get-code {
                        color: $color-red;
                        float: right;
                        @include remCalc(padding-left, 30);
                        @include remCalc(margin-left, 30);
                        border-left: 1px solid $color-border;
                    }
                    .get-code.disabled {
                        color: #ccc !important;
                        background: #fff !important;
                        opacity: 1 !important;
                    }
                    .right-icon {
                        float: right;
                        color: #c7c7cc;
                    }
                }
            }
            .option-item:last-child {
                border-bottom: none;
            }
        }
        .btn-wrap {
            @include remCalc(margin-top, 60);
            // .btn {
            //     background: #f64b5b;
            // }
        }
    }
}
.employeeManage-filterItem {
    width: 100%;
    height: 100%;
    .section {
      @include remCalc(padding, 0, 30);
      color: #333;
      .title {
        @include remCalc(font-size, 32);
        @include remCalc(padding, 40, 0, 28, 0);
      }
      .picker-val {
        @include remCalc(font-size, 28);
        background: #f6f6f6;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        @include remCalc(padding, 0, 20);
        @include remCalc(height, 80);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        i {
          color: #ccc;
        }
      }
      .check-list {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        li {
          text-align: center;
          //@include remCalc(padding, 0, 76);
          @include remCalc(width, 210);
          @include remCalc(height, 80);
          @include remCalc(line-height, 80);
          @include remCalc(font-size, 28);
          @include remCalc(margin-bottom, 20);
          color: #333;
          background: #f6f6f6;
          border: 1px solid #eeeeee;
          border-radius: 4px;
          box-sizing: border-box;
          position: relative;
          overflow: hidden;
          i {
            color: #fff;
            position: absolute;
            @include remCalc(font-size, 16);
            @include remCalc(right, 6);
            @include remCalc(bottom, 2);
            display: none;
          }
          &.checked {
            background: rgba(69, 157, 255, 0.1);
            color: #459dff;
            border: 1px solid transparent;
            i {
              display: block;
            }
            &::before {
              position: absolute;
              content: "";
              display: block;
              @include remCalc(width, 100);
              @include remCalc(height, 40);
              @include remCalc(right, -26);
              @include remCalc(bottom, -20);
              background: #459dff;
              transform: rotate(-218deg);
            }
          }
        }
      }
    }
    .section.has-right{
        @include remCalc(padding, 0, 0,0,30);
        .check-list {
            display: flex;
            flex-flow: wrap;
            justify-content: left;
            li {
                @include remCalc(margin-right, 26);
            }
        }
    }
    .btn-wrap {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 0;
      //box-shadow: 0 -2px 8px 0 #cccccc;
      @include thin-border(true,true);
      > div {
        flex: 1;
        @include remCalc(font-size, 36);
        @include remCalc(height, 88);
        @include remCalc(line-height, 88);

        text-align: center;
        & + div {
          background: #459dff;
          color: #fff;
          &::before{
            border-color: #459dff;
          }
          &::after{
            border-color: #459dff;
          }
        }
        background: #fff;
        color: #459dff;
      }
    }
  }
